<template>
  <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="identityCode">
            <el-input v-model="ruleForm.identityCode"></el-input>
        </el-form-item>
        <el-form-item label="身份证照片" prop="identityPhoto">
            <el-upload class="upload-demo" drag :action="uploadUrl" multiple name="file" ref="upload" :http-request="uploadFile"
            accept="image/jpeg,image/png" :before-upload="beforeUpload" :auto-upload="false" :on-change="handleImport">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将<em>身份证照片</em>拖到此处，或<em>点击上传</em></div>
              <div style="color: #606266;">只能上传jpg/png文件，且不超过500kb</div>
              <!-- <div class="el-upload__tip" slot="tip" style="display: inline-block;font-size: 14px;">
                <img src="" alt="暂无图片" width="360px" height="180px">
              </div> -->
            </el-upload>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
            <el-select v-model="ruleForm.departmentId" placeholder="请选择部门" @change="selectJob()">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="jobtitleId">
            <el-select v-model="ruleForm.jobtitleId" placeholder="请选择职位">
              <el-option v-for="item in jobtitle" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="工资" prop="salary">
            <el-input v-model="ruleForm.salary"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    name:"PositionAdd",
    data() {
          return {
            options:[],							//所有部门
            jobtitles:[],						//所有职位 
            jobtitle:[],						//某个部门下的所有职位
            fileList:[],            //文件列表
            fileData:'',            //将文件追加到formData
            uploadUrl:'https://jsonplaceholder.typicode.com/posts/',
            ruleForm: {
              name: '',
              sex: '',
              phone:'',
              age:'',
              identityCode:'',
              identityPhoto:'',
              departmentId:'',
              jobtitleId:'',
              salary:'',
              delivery: false,
              type: [],
            },
            rules: {
              // name: [
              //   { required: true, message: '请输入姓名', trigger: 'blur' }
              // ],
              // sex: [
              //   { required: true, message: '请选择性别', trigger: 'change' }
              // ],
              // phone: [
              //   { required: true, message: '请输入联系方式', trigger: 'blur' }
              // ],
              // identityCode: [
              //   { required: true, message: '请输入身份证号', trigger: 'blur' }
              // ],
              // identityPhoto: [
              //   { required: true, message: '请填入身份证照片', trigger: 'change' }
              // ],
              // departmentId: [
              //   { required: true, message: '请选择部门', trigger: 'change' }
              // ],
              // jobtitleId: [
              //   { required: true, message: '请选择职位', trigger: 'change' }
              // ],
              // age: [
              //   { required: true, message: '请输入年龄', trigger: 'blur' }
              // ],
              // salary: [
              //   { required: true, message: '请输入工资', trigger: 'blur' }
              // ],
            }
          };
        },
    methods: {
      handlePreview(file){
        console.log(file);
      },
      selectJob(){							//二级职位
        this.ruleForm.jobtitleId = "";
        let j = 0;
        for(let i = 0;i < this.jobtitles.length;i++){
          if(this.jobtitles[i].departmentId == this.ruleForm.departmentId){
            this.jobtitle[j++]={
              value: this.jobtitles[i].id,
              label: this.jobtitles[i].name
            }
          }
        }
      },
      getDepartments(){						//获取所有部门
        this.$axios.post(that.$global.zuulIp+"/position/getDepartmentList").then((response)=>{
          for(let i = 0;i < response.data.length;i++){
            this.options[i]={
              value: response.data[i].id,
              label: response.data[i].name
            }
          }
        }).catch((response)=>{
          console.log(response);
        })
      },										//获取所有职位
      getJobtitlesByDepartmentId(){
        this.$axios.get(that.$global.zuulIp+"/position/getJobtitleListByDepartmentId?departmentId="+0).then((response)=>{
          this.jobtitles = response.data;
        }).catch((response)=>{
          console.log(response);
        })
      },


      //-----------------------------------------
      submitForm(formName) {      //职工信息添加
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('1111111111111111111');
            console.log(this.ruleForm);
          } else {
            console.log('No!');
            return false;
          }
        });
      },
      //----------------------------------------


      resetForm(formName) {       //重置
        this.$refs[formName].resetFields();
      },
    },
    // mounted:function(){
    //   const that = this;
    //   this.$axios.all([
    //     this.$axios.post(that.$global.zuulIp+"/position/getDepartmentList"),
    //     this.$axios.get(that.$global.zuulIp+"/position/getJobtitleListByDepartmentId?departmentId="+0)
    //   ]).then(this.$axios.spread(function(optionsResp,jobtitlesResp){
    //     for(let i = 0;i < optionsResp.data.length;i++){
    //         let list={
    //           value: optionsResp.data[i].id,
    //           label: optionsResp.data[i].name
    //         }
    //         that.options.push(list);
    //       }
    //     that.jobtitles = jobtitlesResp.data;
    //   }))
		// },
}
</script>

<style>
.myupload{
    margin-left: 2em;
}
/* .el-form{
	  width: 500px;
  } */
</style>